<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户编辑</title>
  <link rel="stylesheet" th:href="@{/layui-v2.6.8/css/layui.css}" href="/static/layui-v2.6.8/css/layui.css">
</head>
<body>
<div style="padding: 15px;">
  <div>
    <a th:href="@{/home}">
      <i class="layui-icon layui-icon-return" style="font-size: 30px; color: #1E9FFF;"></i>
    </a>
  </div>
  <form class="layui-form form-position" action="/amin/user/editUser" method="post">
    <input type="text" name="id" th:field="${user.id}" style="display: none;">
    <div class="layui-form-item">
      <label class="layui-form-label">用户名</label>
      <div class="layui-input-block">
        <input type="text" name="userName" th:field="${user.userName}" readonly="readonly" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input layui-input-width">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">密&emsp;码</label>
      <div class="layui-input-block">
        <input type="text" name="password" th:field="${user.password}" readonly="readonly" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input layui-input-width">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">性&emsp;别</label>
      <div class="layui-input-block">
        <select name="sex" lay-filter="aihao" th:field="${user.sex}">
          <option value="1" selected="">男</option>
          <option value="2">女</option>
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">部&emsp;门</label>
      <div class="layui-input-block" >
        <select name="depId" lay-filter="aihao" th:field="${user.depId}" disabled="disabled">
          <option th:each="depList:${depList}" th:value="${depList.id}" th:text="${depList.depName}">本站</option>
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">昵&emsp;称</label>
      <div class="layui-input-block">
        <input type="text" name="userNick" th:field="${user.userNick}" required  lay-verify="required" placeholder="请输入昵称" autocomplete="off" class="layui-input layui-input-width">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">头&emsp;像</label>
      <div class="layui-input-block">
        <div class="layui-upload">
          <button type="button" class="layui-btn" id="test1">上传图片</button>
          <div class="layui-upload-list">
            <img class="layui-upload-img" th:src="${user.userPicture}" style="width: 100px;" id="demo1">
            <p id="demoText"></p>
          </div>
          <div style="width: 95px;">
            <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
              <div class="layui-progress-bar" lay-percent=""></div>
            </div>
          </div>
        </div>

        <a name="list-progress"> </a>

        <input type="text" id="userPicture" style="display:none " name="userPicture"  th:field="${user.userPicture}" required  lay-verify="required" autocomplete="off" class="layui-input layui-input-width">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo">保存</button>
<!--
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
-->
      </div>
    </div>
  </form>
</div>
</body>
<!-- 引入 layui.js -->
<script th:src="@{/layui-v2.6.8/layui.js}" src="/static/layui-v2.6.8/layui.js"></script>
<script th:src="@{/jquery-3.5.1/jquery-3.5.1.min.js}" src="/static/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script>
  layui.use(function(){
    var layer = layui.layer
            ,form = layui.form,upload = layui.upload
            ,element = layui.element;
    //layer.msg('Hello World');
    //常规使用 - 普通图片上传
    var uploadInst = upload.render({
      elem: '#test1'
      ,url: '/amin/user/updatePicture' //改成您自己的上传接口
      ,before: function(obj){
        //预读本地文件示例，不支持ie8
        obj.preview(function(index, file, result){
          $('#demo1').attr('src', result); //图片链接（base64）
        });

        element.progress('demo', '0%'); //进度条复位
        layer.msg('上传中', {icon: 16, time: 0});
      }
      ,done: function(res){
        console.log(res)
        //如果上传失败
        if(res.code > 0){
          return layer.msg('上传失败');
        }
        $('#userPicture').val(res.url)
        //上传成功的一些操作
        //……
        $('#demoText').html(''); //置空上传失败的状态
      }
      ,error: function(){
        //演示失败状态，并实现重传
        var demoText = $('#demoText');
        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
        demoText.find('.demo-reload').on('click', function(){
          uploadInst.upload();
        });
      }
      //进度条
      ,progress: function(n, elem, e){
        element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
        if(n == 100){
          layer.msg('上传完毕', {icon: 1});
        }
      }
    });

    //监听提交
    form.on('submit(formDemo)', function(data){
      //layer.msg(JSON.stringify(data.field));
      return true;
    });
  });
</script>
</html>